<template>
  <div id="Shelf">
    <div class="filter-box">
      <div class="top-box">
        <Filters
          :form="searchForm"
          :filterData="filterData"
          @confirm="changePage(1)"
        />
      </div>
      <a-tabs v-model="activeName">
        <a-tab-pane tab="购入" key="sale"></a-tab-pane>
        <a-tab-pane tab="出售" key="reserve"></a-tab-pane>
      </a-tabs>
    </div>
    <Sort @change="changeSort"/>
    <div class="container">
      <div class="table-list">
        <div class="table-item" @click="showDetail">
          <div class="table-left">
            <img src="@/assets/images/LOGO.png" class="table-img" />
          </div>
          <div class="table-right">
            <div class="right-top">
              <div class="right-top-item">
                <div class="right-name">松木方</div>
                <div class="right-square">10*10*200cm</div>
              </div>
              <div class="right-top-item">
                <div class="right-name">￥1000.00元/立方米</div>
              </div>
              <div class="right-top-item">
                <div class="right-name">预订数量：200立方米</div>
              </div>
              <div class="right-top-item">
                <div class="right-name">广东，佛山市，北滘区</div>
              </div>
              <div class="right-top-item">
                <div class="right-status-name">待发货</div>
              </div>
            </div>
            <!-- <div class="right-center">￥239850</div> -->
            <div class="right-bottom">
              <div class="bottom-item">佛山用友大厦三期工程项目</div>
              <div class="bottom-item">广东省</div>
            </div>
          </div>
          <div class="table-btn-right">
            <a-button type="primary">取消预订</a-button>
            <!-- <a-button type="primary">确认收货</a-button>
                  <a-button type="primary">发货</a-button> -->
          </div>
        </div>
      </div>
      <div class="page-box">
        <a-pagination
          size="small"
          :total="pageConfig.total"
          show-quick-jumper
          :show-total="(total) => `总共 ${pageConfig.total} 条数据`"
          @change="changePage"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import Sort from './components/sort.vue'

@Component({
  components: {
    Sort
  }
})
export default class Task extends Vue {
  activeName: string = 'sale';
  searchForm: any = {
    searchValue: ''
  };
  form: any = {
    date: [],
    number1: 0,
    number2: 0,
    price1: 0,
    price2: 0
  };
  btns: any[] = [
    {
      label: '我要上架',
      callback: () => this.$router.push('/allot/myPurchase/grounding')
    }
  ];

  get filterData () {
    return {
      searchValue: {
        label: '关键词',
        type: 'input',
        template: {
          placeholder: '请输入关键词',
          clearable: true
        }
      }
    };
  }
  Data: any = [];
  pageConfig: any = {
    current: 1,
    total: 10,
    pageSize: 10
  };

  init () {
    // this.getList()
  }
  getList () {
    let { searchValue, roleId, status } = this.searchForm;
    let data = {
      searchValue,
      roleId,
      status,
      page: this.pageConfig.current,
      size: this.pageConfig.pageSize
    };
    this.$api.adminAdminUserListFetch(data).then((res: any) => {
      this.Data = res.data.records;
      this.pageConfig.total = res.data.total;
      if (!this.Data.length && this.pageConfig.current > 1) {
        --this.pageConfig.current;
        this.getList();
      }
    });
  }
  changePage (val: number) {
    this.pageConfig.current = val;
    this.getList();
  }
  searchHandle () {
    this.pageConfig.current = 1;
    this.getList();
  }
  delHandle ({ adminId }: any) {
    let data = { adminId };
    this.$api.adminDeleteFetch(data).then((res: any) => {
      this.$message.success('删除成功');
      this.getList();
    });
  }
  changeStatus (row: any, index: number) {
    let { adminId, status } = row;
    this.$api
      .adminStatusFetch({ adminId, status: !status })
      .then((res: any) => {
        this.$message.success(`${status ? '冻结' : '正常'}成功`);
        this.getList();
      });
  }
  showDetail () {
    this.$router.push({
      path: '/allot/market/operate',
      query: { _alias: 'detail' }
    });
  }
  // 筛选
  changeSort (type: any, value: number) {
    this.pageConfig.current = 1;
  }
}
</script>

<style lang="scss" scoped>
#Shelf {

}
</style>
